<template>
  <div class="mySongList">
    <Title title="我创建的歌单" />
    <Recommend :myData="mySongList" class='Recommend' />
    <Title title="我收藏的歌单" />
    <Recommend :myData="userCollectPlaylist" class='Recommend' />
  </div>
</template>

<script setup>
import Recommend from "@/views/modules/discover/recommend.vue";
import Title from "@/components/Title.vue";

import { computed } from "vue";
import { useUserDetailStore } from "@/pinia/module/userDetail.js";
import { useLoginStore } from "@/pinia/module/login.js";
import { storeToRefs } from "pinia";

const { getID } = useLoginStore()//数据
const { userCreatedPlaylist, userCollectPlaylist } = storeToRefs(useUserDetailStore())//数据
const { get_userPlaylist } = useUserDetailStore()//方法

const mySongList = computed(() => {
  // 删除第一项，因为第一项是我喜欢的音乐
  return userCreatedPlaylist.value.slice(1)
})

const init = () => {
  get_userPlaylist(getID)//获取用户歌单
}
init()
</script>

<style lang="less" scoped>
.mySongList {
  min-height: 100vh;
  padding: 0 20px 20px 20px;
  background-color: #fff;
}
</style>